<template>
  <div v-if="orderDetail">
  	<shop-header ref="shopHeader">	
			<h2>发表评价</h2>	
		</shop-header>
		<div class="coment-item" v-for="(item, index) in orderDetail.goods" :key="index">
			<div class="coment-top">
				<form>
					<div class="order-info bottom-1px">
						<div class="order-cover">
							<span class="img-holder"><img class="obj-cover" :src="item.goodsCover"></span>
						</div>
						<span class="product-name ellipsis">{{ item.goodsName }}</span>
					</div>
					<group class="textarea-group" gutter="0">
	      		<x-textarea v-model="goods[index].content" :max="140" placeholder="请输入评价内容，不超过140个字" :height="120"></x-textarea>
	   		 	</group>
	   		 	<div class="upload-wrapper">
	    			<div class="upload-list clearfix">
	    				<div class="upload-item" v-for="(img,j) in goods[index].commentGallery">
	    					<span class="img-holder"><img class="obj-cover" :src="img"></span>
	    					<i class="del-img" @click="delImg(index, j)"><x-icon type="ios-close-empty" size="20"></x-icon></i>
	    				</div>
	    				<div class="upload-img-btn">
	    					<input type="file" @change="uploadImg($event, index)" class="hidden" name="file" accept="image/gif, image/jpeg, image/jpg, image/png"/>
	    					<img src="../../assets/images/upload_icon.png" alt="">
	    				</div>
	    			</div>
    			</div>
				</form>
			</div>
			<split></split>
			<div class="rater-wrapper">
				<h3>请您对本次服务进行评分</h3>
				<div class="rater-star">
					<rater v-model="goods[index].score" :font-size="36" :margin="-3"></rater>
				</div>
			</div>
		</div>
		<div class="submit-wrapper">
			<div class="submit-btn">
				<six-button type="danger" @click.native="submit">发表评价</six-button>
			</div>
		</div>
  </div>
</template>

<script>
import http from '@/utils/http'	
import { Group, XTextarea, Rater }	from 'vux'
import ShopHeader from '@/components/public/ShopHeader'
import Split from '@/components/public/Split'

export default {
	components: {
		ShopHeader,
		Group,
		XTextarea,
		Split,
		Rater
	},
  data () {
  	return {
  		content: '',
  		score: 0,
  		uploadList: [],
  		score: 0,
  		imgs: [],
  		orderDetail: null,
  		goods: []
  	}
  },
  methods: {
  	getOrderDetail () {
  		let orderId = this.$route.query.id
  		http.get('/api/v1/orderDetail', { orderId }, false, res => {
  			if (res.status == 1) {
  				this.orderDetail = res.data
  				res.data.goods.forEach(item => {
  					this.goods.push({
  						goodsId: item.goodsId,
  						content: '',
  						commentGallery: [],
  						score: 0,
  						isUploadBtn: true
  					}) 					
  				})
  			}
  		})
  	},
  	uploadImg (e, index) {
  		let img = e.target.files[0]
  		let maxSize = 2048
  		let imgSize = img.size
  		if (imgSize > maxSize * 1024) {
  			that.$vux.toast.show({
  				type: 'warn',
  				text: '上传的图片不能大于2M!',
  				width: 'auto',
  				position: 'middle'
  			})
      	return false
  		}
  		let form = new FormData()
  		form.append('file', img); 
  		http.post('/api/v1/uploadImg', form, false, res => {
  			if (res.status == 1) {
  				this.goods[index].commentGallery.push(res.data)
  				this.goods = JSON.parse(JSON.stringify(this.goods))
  				e.target.value = ''
  			}
  		})
  	},
  	// 发表评价
  	submit () {
  		let params = {
  			orderNo: this.orderDetail.orderNo,
  			goods: JSON.stringify(this.goods)
  		}
  		http.post('/api/v1/publishComment', params, false, res => {
  			if (res.status == 1) {
  				this.$vux.toast.show({
  					type: 'success',
  					text: res.msg,
  					width: 'auto',
  					position: 'middle'
  				})
  				setTimeout(() => {
  					this.$router.push({ path: '/my/order', query: { type: 0 } })
  				}, 2000)
  			}else {
  				this.$vux.toast.show({
  					type: 'warn',
  					text: res.msg,
  					width: 'auto',
  					position: 'middle'
  				})
  			}
  		})
  	},
  	delImg (i, j) {
  		let that = this
  		this.$vux.confirm.show({
  			title: '提示信息',
        content: '确定要删除吗？',
        onConfirm: () => {
          that.goods[i].commentGallery.splice(j, 1)
      	}
      })
  	}
  },
  mounted () {
  	this.getOrderDetail()
  }
}
</script>

<style scoped>
.coment-item {
	background: #fff;
}
.submit-wrapper {
	height: 46px;
}
.submit-btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	max-width: 640px;
	z-index: 99;
}
.submit-btn button {
	color: #fff;
	width: 100%;
	height: 46px;
	line-height: 46px;
}
.coment-top {
	background: #fff;
}
.order-info {
	display: flex;
	padding: 10px 15px;
	align-items: center;
	background: #f5f5f5;
}
.order-cover {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin-right: 8px; 
}
.img-holder {
	padding-bottom: 100%;
}
.product-name {
	flex: 1;
}
.upload-wrapper {
	padding: 15px;
}
.upload-list {
	margin-right: -8px;
	margin-bottom: -8px;
}
.upload-item,
.upload-img-btn {
	position: relative;
	width: 25%;
	float: left;
	padding: 0 8px 8px 0;
}
.upload-item img {
	border: 1px solid #f1f1f1;
}
.rater-wrapper {
	background: #fff;
	padding: 15px;
	text-align: center;
}
.hidden {
	position: absolute;
	width: 100%;
	bottom: 8px;
	top: 0;
	opacity: 0;
}
.del-img {
	position: absolute;
	right: 14px;
	top: 6px;
	display: block;
	width: 20px;
	height: 20px;
	background: rgba(0, 0, 0, .5);
	text-align: center;
	line-height: 20px;
	border-radius: 100%;
}
.del-img svg {
	fill: #fff;
}
</style>
